<template>
	<div>
		<smpPanel>
				<el-form :inline="false" label-width="100px" size="mini" ref="form" :model="form">
					
					<el-row>
						<el-col :span="24">
							<el-col :span="6">
								<el-form-item label="文件名:" >
									<el-input v-model="query.body.fileName"></el-input>
								</el-form-item>
							</el-col>
							
							<el-col :span="6">
									<searchButtonGroup @search="onSubmit" @reset="reset" online  />
							</el-col>	
						</el-col>
					</el-row>
				</el-form>
			</smpPanel>
		<!-- <div class="environmentFooter">
		<span slot="footer" class="dialog-footer" id="environmentSpan" >
			<el-button size="mini" type="primary" @click="onSubmit">查&nbsp;&nbsp;&nbsp;询</el-button>
			<el-button size="mini" @click="reset">清空</el-button>
			<el-button  type="success" @click="addFile">新&nbsp;&nbsp;&nbsp;增</el-button>
		</span>
		</div> -->
		
			<smpPanel title="模板列表">
				<createButton slot="option" v-if="vaildPermission('SA0002')" @click="addFile"  />
			
				<el-table :data="list" size="mini" stripe border  style="width: 100%">
					<el-table-column prop="fileName" label="文件名"  align="center" />
					<el-table-column prop="fileDescribe" label="文件描述"  align="center" />
					<el-table-column prop="updateDate" label="修改时间"  align="center" />
					
					<el-table-column  label="操作" align="center"  width="120px">
						<template slot-scope="scope">
							<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;" @click="download(scope.$index, scope.row)">下载</el-link> 
							
							
							<span class="smp_split" v-if="vaildPermission('SA0002')">|</span>
						    <el-link v-if="vaildPermission('SA0002')" size="mini" type="primary" :underline="false" style="font-size: 12px;" @click="handleEdit(scope.$index, scope.row)">修改</el-link>
							<!-- <el-link size="mini" type="primary" :underline="false" style="font-size: 12px;" @click="handleDelete(scope.$index, scope.row)">删除</el-link> -->
						</template>  
					</el-table-column>
					
				</el-table>
				
				<div class="smp-pagination" v-show="total>0">
					<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="query.pageSize" :page-sizes="[10,15,20]" :total="total" :current-page="query.pageNum" @current-change = "currentChange" @size-change="sizeChange">
					</el-pagination>
				</div>
			</smpPanel>
		<!-- <add ref="add" @onSubmit="onSubmit"/>
		<edit ref="edit" @onSubmit="onSubmit"/> -->
		
		
		<edit ref="edit" @fresh="fresh"></edit>

	</div>
</template>

<script>
	"use strict";
	import {getFileManageByPage,getFileDown} from '@/api/help.js';
	import edit from "./edit";
	export default {
		
		components:{
			edit,
		},
		data() {
			return {
				total:0,
					title: '运行环境',
					expand: false,
					
					list: [],
					
					query: {
						body:{
							fileName:'',
						},
						pageNum: 1,
						pageSize: 10
					},
			};
		},
		
		created() {
			Object.assign(this.query.body,this.$route.query);
			if(this.$route.query.pageNum!=undefined){
			this.query.pageNum =this.$route.query.pageNum;
			}
			if(this.$route.query.pageSize!=undefined){
			this.query.pageSize = parseInt(this.$route.query.pageSize);
			}
			this.getList();
		},
		
		methods: {
			
	
			onSubmit() {
				this.query.pageNum = 1;
				this.getList();
			},
			
			reset(form) {
				this.query.body = {}
			},
			
			
			//新增
			addFile(){
				
				this.$refs["edit"].ShowDialog();
			},
			
			//下载
			download(index,row){
				// let row1 = {};
				// Object.assign(row1,row);
				// this.$refs.edit.showDialog(row1);
				
				// const blob = new Blob([row.fileContent],{type:content.type});
				
				// let iconv = require("iconv-lite");
				// iconv.skipDecodeWarning = true;//忽略警告
				// let name = row.fileName;
				
				
				
				
				
				// alert(JSON.stringify(files));
				
				
				
				getFileDown({"fileName": row.fileName}).then(res => {
					let name = row.fileName;
					let file = {
						uid: '-1', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
						name: row.fileName, // 文件名
						status: 'done', // 状态有：uploading done error removed
					}
					const blob = new Blob([res.data]);
					const blobURL = window.URL.createObjectURL(blob);
					const aLink = document.createElement('a');
					aLink.href = blobURL;
					aLink.setAttribute('download',name);
					
					if(typeof aLink.download==='undefined'){
						aLink.setAttribute('target','_blank');
					}
					aLink.style.display = 'none';
					document.body.appendChild(aLink);
					aLink.click();
					document.body.removeChild(aLink);
					window.URL.revokeObjectURL(blob);
				})
				
				
				
				
				
				// const blob = new Blob([row.fileContent],{type:'application/octet-stream',endings:'transparent'}); //将二进制文件转化成blob
				// let name = row.fileName;
				// if(typeof window.navigator.msSaveBlob != 'undefined'){
				// 	window.navigator.msSaveBlob(blob,decodeURI(name));
				// }else{
				// 	const blobURL = window.URL.createObjectURL(blob);
				// 	const aLink = document.createElement('a');
				// 	aLink.href = blobURL;
				// 	aLink.setAttribute('download',name);
					
				// 	if(typeof aLink.download==='undefined'){
				// 		aLink.setAttribute('target','_blank');
				// 	}
				// 	aLink.style.display = 'none';
				// 	document.body.appendChild(aLink);
				// 	aLink.click();
				// 	document.body.removeChild(aLink);
				// 	window.URL.revokeObjectURL(blob);
				// }
				
				
			},
			
			
			
			
			
			
			//修改
			handleEdit(index,row){
				let row1 = {};
				Object.assign(row1,row);
				this.$refs.edit.showDialog1(row1);
			},
			
			//删除
			handleDelete(index,row){
				delEnvironmentInfo(row).then(response => {
					this.$message({
						duration:5000,
						type: 'success',
						message: '删除成功！'
					});
					this.getList();
					
				}).catch(error => {
					this.$message({
						duration:5000,						type: 'error',
						message: '删除失败！'
					});
					this.getList();
				});
			},
			
			getList() {
				getFileManageByPage(this.query).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;
					
					let query ={};
					Object.assign(query,this.query.body);
					query.pageNum = this.query.pageNum;
					query.pageSize = this.query.pageSize;
					this.$router.push({query:query})
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},
			
			
			fresh(){
				this.getList();
			},
			
			
			currentChange(val){
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val){
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			}
			

		},
		
	
	}
</script>

<style>
	.environmentFooter{
		margin-bottom: 20px;
	}
	
	#environmentSpan{
		margin-left: 1320px;
	}
</style>